<template>
  <div class="teach-course">
    <my-tabs :tab-list="tabList"></my-tabs>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="92px"
      size="small"
      class="teach-ruleForm"
    >
      <el-form-item label="课程名称" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="课程类型" prop="course_type">
        <el-select v-model="ruleForm.course_type" placeholder="请选择课程类型">
          <el-option label="点播" value="1"></el-option>
          <el-option label="直播" value="2"></el-option>
          <!-- <el-option label="面授" value="3"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="直播类型" prop="course_live_type" v-if="ruleForm.course_type == 2">
        <el-select v-model="ruleForm.course_live_type" placeholder="请选择直播类型">
          <el-option label="大班课" value="1"></el-option>
          <el-option label="小班课" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="购买人数" v-if="ruleForm.course_live_type == 2">
        <el-input-number v-model="ruleForm.limit_buy_count" :min="1" :max="15"></el-input-number>
      </el-form-item>
      <el-form-item label="所属分类" prop="category">
        <el-cascader
          v-model="ruleForm.category"
          placeholder="请选择分类"
          :props="categoryProps"
          :options="category"
          :show-all-levels="false"
          collapse-tags
        ></el-cascader>
      </el-form-item>
      <el-form-item label="目录层级" prop="section_level">
        <el-select v-model="ruleForm.section_level" placeholder="请选择目录层级">
          <el-option label="一级" value="1"></el-option>
          <el-option label="二级" value="2"></el-option>
          <el-option label="三级" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程介绍" prop="info">
        <edu-editor :value.sync="ruleForm.info"></edu-editor>
      </el-form-item>
      <el-form-item label="课程封面" prop="cover">
        <SelectMaterial
          :type="1"
          :value.sync="ruleForm.cover"
          :field.sync="cover_url"
        ></SelectMaterial>
      </el-form-item>
      <el-form-item label="售价" prop="price">
        <el-input-number v-model="ruleForm.price" :precision="2" :max="99999"></el-input-number>
      </el-form-item>
      <el-form-item label="原价" prop="scribing_price">
        <el-input-number
          v-model="ruleForm.scribing_price"
          :precision="2"
          :max="99999"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="上架时间" prop="listing_time">
        <el-date-picker
          v-model="ruleForm.listing_time"
          type="datetime"
          placeholder="选择上架时间"
          align="right"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item>
        <el-button type="primary" @click="handleSubmitForm('ruleForm')" :loading="disabled"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyTabs from '../../components/myTab.vue'
import EduEditor from '@/views/my/classes/material/select/components/editor'
import SelectMaterial from '@/views/my/classes/material/select/index'
export default {
  components: {
    MyTabs,
    EduEditor,
    SelectMaterial
  },
  inject: ['reload'],
  data() {
    // 上传文件
    var checkCard = (rule, value, callback) => {
      if (value == 0) {
        callback(new Error('请选择封面'))
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          title: '添加授课'
        }
      ],
      categoryProps: {
        multiple: true,
        value: 'id',
        label: 'title',
        children: 'child'
      },
      rules: {
        title: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        course_type: [{ required: true, message: '请选择课程类型', trigger: 'change' }],
        course_live_type: [{ required: true, message: '请选择直播类型', trigger: 'change' }],
        category: [{ type: 'array', required: true, message: '请选择分类', trigger: 'change' }],
        section_level: [{ required: true, message: '请选择目录层级', trigger: 'blur' }],
        info: [{ required: true, message: '请输入课程介绍', trigger: 'blur' }],
        cover: [{ required: true, validator: checkCard, trigger: 'blur' }],
        listing_time: [{ required: true, message: '请选择上架时间', trigger: 'change' }]
      },
      ruleForm: {
        title: '',
        course_type: '',
        course_live_type: '',
        limit_buy_count: 0,
        category: [],
        section_level: '',
        info: '',
        cover: 0,
        price: 0,
        scribing_price: 0,
        listing_time: ''
      },
      cover_url: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '立即上架',
            onClick: function(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '明日凌晨',
            onClick: function(picker) {
              let current = new Date()
              let nowDate =
                (current.getHours() * 60 * 60 + current.getMinutes() * 60 + current.getSeconds()) *
                1000
              let nextDate = new Date(current.getTime() + 86400000 - nowDate)
              picker.$emit('pick', nextDate)
            }
          }
        ]
      },
      category: [],
      disabled: false
    }
  },
  computed: {
    // 用户信息
    accountInfo() {
      return this.$store.getters['user/accountInfo']
    }
  },
  mounted() {
    this.handleCategory()
  },
  methods: {
    // 获取分类
    handleCategory() {
      this.$api.getCategory(
        {
          type: 0,
          mhm_id: this.accountInfo.mhm_id
        },
        res => {
          this.category = res.data
        }
      )
    },
    // 提交
    handleSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.disabled = true
          this.$api.createTeacherCourseAdd(
            {
              ...this.ruleForm,
              listing_time: this.ruleForm.listing_time.getTime() / 1000
            },
            res => {
              this.$message.success(res.msg, res => {
                this.$router.go(-1)
                this.disabled = false
              })
            },
            err => {
              this.$message.error(err.msg)
              this.disabled = false
            }
          )
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.teach-course {
  .teach-ruleForm {
    ::v-deep .el-form-item {
      .el-input,
      .el-select,
      .el-cascader {
        width: 224px;
      }
      .el-input-number,
      .el-input-number .el-input {
        width: 160px;
      }
      .el-form-item__label,
      .el-input {
        font-size: 12px;
      }
      .avatar-uploader {
        .el-upload {
          width: 110px;
          display: block;
          .avatar-uploader-icon {
            width: 110px;
            height: 110px;
            line-height: 110px;
          }
        }
        .avatar {
          width: 110px;
          height: 110px;
          display: block;
        }
      }
    }
  }
}
</style>
